{% extends "h:templates/layouts/admin.html.jinja2" %}

{% set page_id = 'badge' %}
{% set page_title = 'Chrome extension badge' %}

{% block content %}
  <p>
    This page lets you edit the list of URIs on which the Chrome extension will
    never show a number on its browser button badge.
  </p>

  <p>
    The URIs that you enter here are
    <a href="http://www.postgresql.org/docs/9.4/static/functions-matching.html">
    PostgreSQL <code>LIKE</code> patterns</a>. For example to block all pages
    on <code>http://example.com/</code> use <code>%//example.com%</code>.
    If a URI that you want to block contains one of the <code>LIKE</code>
    special characters (<code>%</code> or <code>_</code>), say <code>_</code>,
    you can backslash-escape it in your pattern: <code>\_</code>.
  </p>

  </ul>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Add a URI</h3>
    </div>
    <div class="panel-body">
      <form method="POST" class="form-inline">
        <input type="hidden" name="csrf_token" value="{{ get_csrf_token() }}">
        <div class="form-group">
          <label for="add">URI</label>
          <input type="text" class="form-control" name="add">
          <input type="submit" class="btn btn-default" value="Add">
        </div>
      </form>
    </div>
  </div>

  <div class="panel panel-default">
    <div class="panel-heading">
      <h3 class="panel-title">Remove a URI</h3>
    </div>
    <div class="panel-body">
      {% if uris %}
      <form
        method="POST"
        action="{{ request.route_url('admin.badge') }}">
        <input type="hidden" name="csrf_token" value="{{ get_csrf_token() }}">
        <ul>
          {% for uri in uris %}
            <li>
              {{ uri }}
              <button type="submit" class="btn btn-link btn-sm"
                      name="remove" value="{{ uri }}">
                Remove
              </button>
            </li>
          {% endfor %}
        </ul>
      </form>
      {% else %}
        <p><em>No URIs are currently blocked&hellip;</em></p>
      {% endif %}
    </div>
  </div>
{% endblock %}
